<template>
    <div class="feedback-container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>意见反馈</template>
            <template #right><i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i></template>
        </TmallNavBar>

        <div class="feedback-content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="formParams.content"
                        rows="2"
                        type="textarea"
                        maxlength="100"
                        autosize
                        placeholder="请输入意见内容"
                        show-word-limit
                        :rules="[{ required: true, message: '请输入意见内容' }]"
                    />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" color="#27BA9B">
                    提&nbsp;&nbsp;交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { reqAddFeedbackAPI } from '@/apis/feedback'
import { showSuccessToast } from 'vant';
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

// 路由器
const router = useRouter()

const formParams = reactive({
    content: ''
})

const onSubmit = async () => {
    // 请求新增意见反馈接口
    await reqAddFeedbackAPI(formParams)
    showSuccessToast('新增意见反馈成功')
    router.push({path: '/me'})
}

</script>

<style scoped lang="scss">
.feedback-container {
    margin-top: 50px;
}
</style>